<template>
  <div>
    <div class="header clear-fix">
      <span class="img-left" @click="handelClick">
        <img src="../assets/img/fanhui.png" alt="" />
      </span>
      <div class="img-right">
        <img src="../assets/img/fenxiang.png" alt="" />
      </div>

      <div class="top clear-fix">
        <div class="top-left">
          <div class="left-img">
            <img :src="recommendList.headImg" alt="" />
          </div>
          <div class="top-text">
            <p>{{ recommendList.username }}</p>
            <span>09-25</span>
          </div>
        </div>
        <div class="top-right">
          <p>关注</p>
        </div>
      </div>
    </div>

    <div class="main">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <!-- <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item> -->

        <van-swipe-item
          class="banner-img"
          v-for="item in recommendList.picure"
          :key="item.id"
        >
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>

      <div class="brief">
        <p>{{ recommendList.title }}</p>
        <span v-for="(item, index) in recommendList.label" :key="index">{{
          item
        }}</span>
      </div>

      <div class="interact clear-fix">
        <div class="interact-left">
          <img src="../assets/img/zan2.png" alt="" />
          <img src="../assets/img/pinglun.png" alt="" />
          <img src="../assets/img/shoucang.png" alt="" />
        </div>
        <div class="heat">
          <span>喜欢 {{ recommendList.likes }}</span>
          <span>评论 {{ recommendList.browse }}</span>
        </div>
      </div>
      <div class="new">
        <p>最新评论</p>
      </div>
    </div>
    <div class="footer">
      <van-search
        v-model="value"
        placeholder="发表评论 ~"
        class="inputs"
        shape="round"
        left-icon="edit"
      />
      <div class="detail">
        <div>
          <img src="../assets/img/zan2.png" alt="" />
          <p>{{ recommendList.likes }}</p>
        </div>
        <div>
          <img src="../assets/img/pinglun.png" alt="" />
          <p>{{ recommendList.browse }}</p>
        </div>
        <div>
          <img src="../assets/img/shoucang.png" alt="" />
          <p>1702</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { Swipe, SwipeItem, Search } from "vant";

import { useRoute, useRouter } from "vue-router";

export default {
  props: ["id"],
  setup() {
    const showShare = ref(false);
    const recommendList = ref([]);
    const route = useRoute();
    const router = useRouter();
    const id = route.params.id;
    const handelClick = () => {
      router.go(-1);
    };

    // console.log(1);

    onMounted(() => {
      fetch(`http://2107.wqdp.com.cn/index/recommend?count=10`)
        .then((response) => {
          return response.json();
        })
        .then((res) => {
          console.log(res);

          recommendList.value = res.result.filter((item) => item.id == id)[0];
          // console.log(recommendList.value);
        });
    });

    const value = ref("");
    return { value, recommendList, handelClick, showShare };
  },

  components: {
    VanSwipe: Swipe,
    VanSwipeItem: SwipeItem,
    VanSearch: Search,
  },
};
</script>

<style lang="less" scoped>
.clear-fix:after {
  content: "";
  height: 0;
  clear: both;
  overflow: hidden;
  display: block;
  visibility: hidden;
}
.header {
  width: 375px;
  height: 85px;
  background: #ffffff;
  position: fixed;
  top: 0;
  z-index: 998;

  .img-left {
    display: inline-block;
  }
  .img-left img {
    width: 8px;
    height: 14px;
    margin: 12px 0 0 15px;
  }
  .img-right {
    float: right;
  }
  .img-right img {
    width: 14px;
    height: 14px;
    margin: 12px 12px 0 0;
  }
}
.top {
  // width: 375px;
  // padding-top: 40px;
  height: 45px;
  background: #ffffff;
  border: 0px solid #ffffff;
  margin-top: 10px;
  // box-shadow: 0px 3px 5px 0px rgba(51, 51, 51, 0.1);

  .top-left {
    float: left;
    margin: 5px 0 0 20px;
  }
  .left-img {
    float: left;
  }

  .left-img img {
    width: 27px;
    height: 27px;
    border-radius: 50%;
  }
  .top-text {
    float: left;
    margin-left: 10px;
  }

  .top-text p {
    height: 20px;
    font-size: 10px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .top-text span {
    display: block;
    height: 8px;
    font-size: 10px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #b3b3b3;
  }
  .top-right {
    float: right;
    margin: 10px 20px 0 0;
  }
  .top-right p {
    width: 36px;
    height: 18px;
    background: #f04a3a;
    border: 0px solid #ffffff;
    border-radius: 9px;
    color: #fffefe;
    font-size: 10px;
    text-align: center;
    line-height: 18px;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
}
.main {
  margin-left: 13px;
  margin-top: 10px;
  width: 348px;
  padding-top: 85px;
}
.van-swipe-item {
  height: 463px;
}
.brief p {
  width: 84px;
  height: 13px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-top: 20px;
}
.brief span {
  display: inline-block;
  // width: 25px;
  // height: 10px;
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  line-height: 18px;
  margin-bottom: 20px;
  margin-right: 5px;
}
.interact {
  border-top: 1px solid #e6e6e6;
}
.interact-left {
  float: left;
  margin-top: 15px;
}
.interact-left img {
  width: 18px;
  height: 18px;
  margin-right: 25px;
}
.heat {
  margin: 10px;
  float: right;
}
.heat span {
  width: 44px;
  height: 10px;
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.heat span:nth-child(1) {
  margin-right: 15px;
}
.new p {
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-top: 10px;
}

.footer {
  height: 75px;
  background: #ffffff;
  box-shadow: 0px 0px 0px 0px rgba(51, 51, 51, 0.1);
  margin-top: 5px;
}
.inputs {
  float: left;
  border-radius: 13px;
}
.van-search {
  width: 216px;
}
.detail {
  float: right;
}
.detail div {
  margin-top: 8px;
  width: 50px;
  float: left;
}
.detail img {
  width: 18px;
  height: 18px;
  margin-left: 7px;
}
.detail p {
  width: 21px;
  height: 8px;
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  text-align: center;
}
.banner-img img {
  width: 348px;
  height: 463px;
}
</style>
